<!--  -->
<template>
  <Modal :title="title" loading @on-visible-change="change"  width="650"  :zhmodel="zhmodel" v-model="model" ok-text="分配" cancel-text="放弃操作" :mask-closable="false" class="zh-modal-form" class-name="vertical-center-modal">
      <!-- <p slot="header" >分配维修单</p> -->
      <div style="padding:15px 20px;">
        <template v-if="!!data&&data.length>0">
            <p>分配/转介记录</p>
            <Table style="marginBottom:20px;"  border :columns="columns" :data="data"></Table>
        </template>
        
        
        <Form style="padding:0 30px;" :model="formData" :label-width="60" v-if="optionsArrayF.length>0||optionsArrayS.length>0">
            <FormItem label="分配给">
                <Select v-model="formData.candidate" filterable v-if="optionsArrayF.length>0||optionsArrayS.length>0">
                    <OptionGroup  v-if="optionsArrayF.length>0" label="同城">
                        <Option class="zh-flex-5 zh-flex" v-for="item in optionsArrayF" :value="item.value" :key="item.value">
                            <span style="width:30%">{{item.name}}({{item.doing_task_count}})</span>
                            <span style="width:30%">{{item.distance}}</span>
                            <span style="width:40%">{{item.serviceName}}</span>
                        </Option>
                    </OptionGroup>
                    <OptionGroup  v-if="optionsArrayS.length>0" label="异地">
                        <Option class="zh-flex-5 zh-flex" v-for="item in optionsArrayS" :value="item.value" :key="item.value">
                            <span style="width:30%">{{item.name}}({{item.doing_task_count}})</span>
                            <span style="width:30%">{{item.distance}}</span>
                            <span style="width:40%">{{item.serviceName}}</span>
                        </Option>
                    </OptionGroup>
                </Select>
            </FormItem>
            <FormItem label="备注">
                <Input :maxlength="20" v-model="formData.content" ></Input>
            </FormItem>
        </Form>
      </div>
      <div slot="footer">
                <div class="zh-flex zh-flex-5" >
                    <Button @click="giveUpActionClick" type="ghost">放弃操作</Button>
                    <Button @click="clickDistribuClick" class="zh-hollow" type="primary" >分配</Button>
                </div>
                
            </div>
    </Modal>
</template>

<script>
export default {
    name:'distribuModal',
    data () {
        return {
            model:false,
             columns:[
                {
                key:'operator',
                title:'操作人',
                width:80
                },
                {
                key:'action',
                title:'操作',
                width:80
                },
                {
                key:'nextOperator',
                title:'分配/转介给',
                width:110
                },
                {
                key:'time',
                title:'时间'
                },
                {
                key:'remarks',
                title:'备注'
                }
            ],
        };
    },
    props:{
        zhmodel:Boolean,
        title:String,
        data:{
            type:Array,
            default:[]
        },
        formData:{
            type:Object,
            default:{
                pro:'',
                remarks:''
            }
        },
        optionsArrayF:{
            type:Array,
            default:[]
        },
        optionsArrayS:{
            type:Array,
            default:[]
        },
        confirmDistribu:Function,
        giveUpAction:Function
    },
   
    methods:{
        giveUpActionClick(){
            this.$emit('giveUpAction')
        },
        clickDistribuClick(){
            this.$emit('confirmDistribu')
        },
        change(active){
            this.$emit('change',active)
        }
    },
    watch:{
        zhmodel(){
            this.model=this.zhmodel
        },
        model(){
            console.log(this.optionsArrayF)
            console.log(this.optionsArrayS)
        }
    }

}

</script>
<style lang='scss' >
</style>